<#include "../include/header.html" />
<script type="text/javascript">
    var viewModel = Hap.createGridViewModel("#grid");
</script>
<body>
<div id="page-content">
    <div class="pull-left" id="toolbar-btn" style="padding-bottom:10px;">
        <span onclick="openAppWindow()"  class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;" ><@spring.message "hap.new"/></span>
        <span  data-bind="click:remove" class="btn btn-danger" style="float:left;"><@spring.message "hap.delete"/></span>
    </div>
    <script>kendo.bind($('#toolbar-btn'), viewModel);</script>
    <div class="pull-right" id="query-form" style="padding-bottom:10px;">
        <input  data-role="maskedtextbox" placeholder ="<@spring.message 'api.application.name'/>"
                type="text"  class="k-textbox"  type="text" style="float:left;width:150px;margin-right:5px;" data-bind="value:model.name"/>
        <input  data-role="maskedtextbox" placeholder ="<@spring.message 'api.application.code'/>"
                type="text"  class="k-textbox"  type="text" style="float:left;width:150px;margin-right:5px;" data-bind="value:model.code"/>
        <span class="btn btn-primary" style="float:left;width:70px" data-bind="click:query" type="submit"><@spring.message "hap.query"/></span>
        <div style="clear:both"></div>
    </div>
    <script>kendo.bind($('#query-form'), viewModel);</script>
    <div style="clear:both">
        <div id="grid"></div>
    </div>
</div>
<div id="appWindow"></div>

<script type="text/javascript">
    Hap.initEnterQuery('#query-form', viewModel.query);
    var dataSource = Hap.createGridDataSource({
        url:"${base.contextPath}/sys/application/app/",
        model: {
            id: "applicationId"
        }
    });

    function openAppWindow(id) {
        var url = '${base.contextPath}/gateway/api_application_edit.html';
        if (id) {
            url = url + '?applicationId=' + id;
        }

        var editWin = Hap.createWindow('#appWindow',{
            width: '90%',
            height: 600,
            title: '<@spring.message "hap.edit"/>',
            url: url
        })

        if (parent.autoResizeIframe) {
            parent.autoResizeIframe('${RequestParameters.functionCode!}', 700, function () {
                editWin.center().open();
            })
        } else {
            editWin.center().open();
        }
    }

    $("#grid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        //scrollable: true,
        navigatable: false,
        selectable: 'multiple, rowbox',
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "code",
                title: '<@spring.message "api.application.code"/>',
                width: 170
            }, {
                field: "name",
                title: '<@spring.message "api.application.name"/>',
                width: 170
            },  {
                field: "client.clientId",
                title: '<@spring.message "hapinterfaceheader.clientid"/>',
                width: 280
            },  {
                field: "client.clientSecret",
                title: '<@spring.message "hapinterfaceheader.clientsecret"/>',
                width: 280
            },{
                title: '<@spring.message "hap.edit"/>',
                width: 70,
                headerAttributes: {
                    style: "text-align: center"
                },
                attributes: {style: "text-align:center"},
                template: function (rowdata) {
                    if (!!rowdata.applicationId) {
                        return Hap.createAnchor('<@spring.message "hap.edit"/>', openAppWindow, rowdata.applicationId);
                    }
                    return '';
                }
            } /* {
                field: "client.authorizedGrantTypes",
                title: '<@spring.message "oauth2clientdetails.granttypes"/>',
                width: 600
            }*/
        ],
        editable: false
    });

</script>
</body>
</html>